<!--
  ~ MIT License
  ~
  ~ Copyright (c) 2021-2022 yangrunkang
  ~
  ~ Author: yangrunkang
  ~ Email: yangrunkang53@gmail.com
  ~
  ~ Permission is hereby granted, free of charge, to any person obtaining a copy
  ~ of this software and associated documentation files (the "Software"), to deal
  ~ in the Software without restriction, including without limitation the rights
  ~ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
  ~ copies of the Software, and to permit persons to whom the Software is
  ~ furnished to do so, subject to the following conditions:
  ~
  ~ The above copyright notice and this permission notice shall be included in all
  ~ copies or substantial portions of the Software.
  ~
  ~ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
  ~ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
  ~ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
  ~ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
  ~ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
  ~ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  ~ SOFTWARE.
  -->

<html xmlns:th="http://www.thymeleaf.org" lang="zh-Hans">
<head th:include="layout/head.html :: head"></head>
<body th:style="${#strings.isEmpty(cv_user_bg_img)} ?  'background: rgb(239,239,243)':${cv_user_bg_img}">
    <!--导航栏-->
    <div th:include="layout/navbar::navbar"></div>
    <!--内容-->
    <div th:include="::content" style="min-height: 750px;height: auto;" class="mt-2">页面正文内容</div>
    <!--页脚-->
    <div class="mt-2" th:include="layout/footer::footer"></div>
    <!--js-->
    <script th:src="${ossStatic} + @{/plugins/jquery/jquery-3.6.0.min.js}" type="text/javascript"></script>
    <!-- 包含 Popper 的 Bootstrap 集成包 -->
    <script th:src="${ossStatic} + @{/bootstrap/js/5/bootstrap.bundle.min.js}" type="text/javascript"></script>
    <!--工具-->
    <script th:src="${ossStatic} + @{/js/utils.js}" type="text/javascript"></script>
    <script th:src="${ossStatic} + @{/plugins/goup/jquery.goup.min.js}" type="text/javascript"></script>
    <!--插件类-->
    <script th:src="${ossStatic} + @{/js/cv.js}" type="text/javascript"></script>
    <!--自定义js-->
    <div th:replace="::js">自定义js</div>
    <!--sweetalert提示框-->
    <script async="async" th:src="${ossStatic} + @{/plugins/sweetalert/sweetalert.min.js}" type="text/javascript"></script>
    <!--导航栏js-->
    <script async="async" th:src="${ossStatic} + @{/js/navbar.js}" type="text/javascript"></script>
    <script async="async" th:src="${ossStatic} + @{/plugins/viewerjs/viewer.min.js}"></script>
    <script>
        function initViewer() {
            // 获取所有需要放大的图片元素
            const images = document.querySelectorAll('article img');
            for (let i = 0; i < images.length; i++) {
                let image = images[i];
                image.setAttribute('data-original', image.src);
                image.setAttribute('data-toggle', 'modal');

                new Viewer(image, {
                    // 配置选项
                    initialZoomRatio: 1, // 初始缩放比例
                    title: false, // 是否显示标题
                    toolbar: {
                        zoomIn: 4, // 放大按钮的缩放比例
                        zoomOut: 4, // 缩小按钮的缩放比例
                        oneToOne: true, // 显示原始大小按钮
                        reset: true, // 显示重置按钮
                        prev: true, // 显示上一张图片按钮
                        next: true, // 显示下一张图片按钮
                        rotateLeft: true, // 显示向左旋转按钮
                        rotateRight: true, // 显示向右旋转按钮
                        flipHorizontal: true, // 显示水平翻转按钮
                        flipVertical: true, // 显示垂直翻转按钮
                    },
                    backdrop: true, // 显示背景遮罩
                    keyboard: true, // 是否支持键盘操作
                    transition: true, // 是否启用过渡动画
                    zIndex: 9999, // 图片查看器的 z-index 值
                    viewed() {
                        // 图片加载完成后的回调函数
                        console.log('Viewer.js loaded');
                    }
                });
            }
        }

        //在页面加载完毕后调用该函数
        window.onload = function () {
            initViewer();
        };
    </script>

</body>
</html>
